<!--组件-开关-->
<template>
  <div class="row acenter">
    <div class="row acenter">
        <text class="font28 text2">{{title}}</text>
        <div class="width8" v-if="comment && comment.length"></div>
        <LImage class="explain" v-if="comment && comment.length" :src="Config.img('wenhao.png')" @click="explainClick"></LImage>
    </div>

    <div class="all"></div>
    <Switc class="switc"  ref='switc' :isOn="isOn" :isEdit="true" @switcClick="switcClick"></Switc>
    <div class="mantle" v-if="isEdit"></div>
  </div>
</template>

<script>

import modal from '@/_js/modal';
import Config from "@/_js/config";

//功能
const globalEvent = weex.requireModule('globalEvent');

export default {

  model:{
    prop:"isOn",
    event:"change",
  },

  isEdit:{ //turn不可编辑
    type:Boolean,
    default:false,
  },

  props:{
    title:{
      type:String,
      default:'',
    },

    comment: {
      type:String,
      default:undefined,
    },

    isOn:{
      type:Boolean,
      default:true,
    },
  },
  
  data() {
    return {
      Config:Config,
      
    };
  },

  mounted(){
  },

  methods:{

    /********************************************** 点击触发*/
    //开关点击
    switcClick(e){
      this.$emit("change", e.isOn);
    },
    
    //说明点击
    explainClick(){
      var parm = {'message':this.comment};
      modal.alert(parm,(bool)=>{
        navigator.back();
      });
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>

.switc{
  width: 90px;
  height: 60px;
}
.mantle{
  width: 670px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.explain {
  width: 28px;
  height: 28px;
  margin-left: 8px;
  margin-right: 8px;
}

.width8{
  width: 8px;
}
</style>
